<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.css" />
</head>

<body style="padding: 15px">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">图书表格</h3>
    </div>
    <div class="panel-body form-inline">
      <form id="bookForm">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input type="text" class="form-control" name="bookname" placeholder="请输入书名" />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input type="text" class="form-control" name="author" placeholder="请输入作者" />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input type="text" class="form-control" name="publisher" placeholder="请输入出版社" />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
    </div>
    </form>
  </div>

  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
        
      </tr>
    </thead>
    <tbody id="tb">
      <tr>
  
      </tr>
    </tbody>
  </table>

  <script src="./lib/form-serialize.js"></script>
  <script src="./lib/axios.js"></script>

  <!-- <script src="./js/index2.js"></script> -->
  <!-- <script src="./js/index.js"></script> -->

  <script>
    const tbody=document.querySelector('#tb')
    const form=document.querySelector('#bookForm')
   
    // axios.get('http://ajax-api.itheima.net/api/books').then(({data:res})=>{
    //   console.log(res);
    // })
    function renderTable(){
      axios.get('http://ajax-base-api-t.itheima.net/api/getbooks').then(({data:res})=>{
    const {data}=res
    data.forEach((item)=>{
      const tr=document.createElement('tr')
      tr.innerHTML=`
        <td">${item.id}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td ><a href="#" data-id="${item.id}">删除</a></td>`
        tbody.appendChild(tr)
    })
   })
    }

    renderTable()
//添加书名
    form.addEventListener('submit',function(e){
    e.preventDefault()
   const obj=serialize(form,{hash:true})
   if(!obj) return alert('请填写')
   form.reset()
   axios.post('http://ajax-base-api-t.itheima.net/api/addbook',obj).then(({data:res})=>{
    console.log(res);

    alert(res.msg)
    if(res.status===201){
      tbody.innerHTML=``
      renderTable()
    }
   })
    })   
    
  //删除

  tbody.addEventListener('click',function(e){
    if(e.target.tagName==='A'){
      console.log(e.target);
     const id= e.target.dataset.id
     axios.get('http://ajax-base-api-t.itheima.net/api/delbook',{params:{id}}).then(({data:res})=>{
      alert(res.msg)
      if(res.status===200){
        tbody.innerHTML=``
        renderTable()
      }
    // {e.target.parentNode.parentNode.remove()}
    })
  }})
  </script>
</body>

</html>